<template>
  <div id="test6" style="display: flex; flex-grow: 1; height: 100%; width: 100%">
    <el-row :gutter="20" style="height: 100%; width: 100%">
      <el-col :span="6" style="height: 100%">
        <el-card style="height: 100%">
          <div class="tree" style="height: 100%">
            <!--<el-scrollbar class="tree_scrollbar" style="height: 100%; overflow-x: hidden">-->
            <el-tree
              :data="organization"
              check-on-click-node
              default-expand-all
              ref="tree"
              node-key="id"
              :expand-on-click-node="false"
              :props="classTreeNode"
              :highlight-current="true"
              @node-click="getCurrentKey"
            ></el-tree>
            <!--:render-content="renderContent"-->
            <!--</el-scrollbar>-->
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" style="height: 100%">
        <el-card style="height: 100%">
          <el-row>
            <el-col :span="2">
              <el-button @click="handleQuery" type="primary" plain>查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="handleNew" type="primary" plain>新增</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain>导入</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain>导出</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="handleRestQuery" type="primary" plain>重置</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2" style="margin-top: 10px">
              <span>学校名称:</span>
            </el-col>
            <el-col :span="3">
              <el-input placeholder="请输入学校名称"></el-input>
            </el-col>
            <el-col :span="1" style="margin-top: 10px">
              <span>年级:</span>
            </el-col>
            <el-col :span="3">
              <el-input placeholder="请输入年级"></el-input>
            </el-col>
            <el-col :span="1" style="margin-top: 10px">
              <span>班级:</span>
            </el-col>
            <el-col :span="3">
              <el-input placeholder="请输入班级"></el-input>
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <span>学生姓名:</span>
            </el-col>
            <el-col :span="3">
              <el-input v-model="queryData.name" placeholder="请输入学生姓名"></el-input>
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <span>学生学号:</span>
            </el-col>
            <el-col :span="3">
              <el-input v-model="queryData.number" placeholder="请输入学生学号"></el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2" style="margin-top: 10px">
              <span>学生卡号:</span>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="请输入班级名称"></el-input>
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <span>家长手机:</span>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="请输入班级名称"></el-input>
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <span>家长接送卡:</span>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="请输入班级名称"></el-input>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2">
              <el-button @click="deleteSelectionChange" type="text">批量删除</el-button>
            </el-col>
          </el-row>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="pageInfo.list"
            @selection-change="selectionChange"
            :max-height= tableMaxHeight
            tooltip-effect="dark"
            style="
              width: 100%;
              height:100%
              text-align: center;
              align-items: center;
              justify-content: center;
            "
          >
            <!-- @selection-change="handleSelectionChange"-->

            <el-table-column type="selection" width="55"></el-table-column>
            <!--<el-table-column prop="no" label="序号"></el-table-column>-->
            <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
            <el-table-column prop label="学籍照"></el-table-column>
            <el-table-column prop="school" label="学校名称"></el-table-column>
            <el-table-column prop="grade_clazz" label="年级"></el-table-column>
            <el-table-column prop="clazzName" label="班级"></el-table-column>
            <el-table-column prop="number" label="学生学号"></el-table-column>
            <el-table-column prop label="学生卡号"></el-table-column>
            <el-table-column prop label="监护人手机" width="120"></el-table-column>
            <el-table-column prop label="监护人接送卡" width="120"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleCheck(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top:10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNum"
              :page-size="pageInfo.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--新增学生弹出框-->
    <el-dialog title="新增学生" :visible.sync="dialognewVisible" center width="30%">
      <el-form class="newStudentForm" label-width="80px" :model="newStudentForm">
        <el-form-item label="学生姓名">
          <el-input v-model="newStudentForm.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="newStudentForm.clazz"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="newStudentForm.number"></el-input>
        </el-form-item>
        <el-form-item label="学校">
          <el-input v-model="newStudentForm.school"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-input v-model="newStudentForm.photoUrl"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button @click="handleRest">重置</el-button>
      </div>
    </el-dialog>
    <!--详细信息弹出框-->
    <el-dialog title="学生详细信息" :visible.sync="dialogVisible" center width="40%">
      <el-row class="top_img" style="display: flex; justify-content: center">
        <img class="photo" src="../assets/images/shoyeimg1.jpg" height="200px" center />
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col class="stu_info" :span="6" style="border-width: 2px 1px 1px 2px">
          <div class="grid-content bg-purple">学生姓名</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 2px 1px 1px 1px">
          <!--<div class="grid-content bg-purple">{{ row.studentName }}</div>-->
          <el-input class="stu_input" v-model="row.studentName" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 2px 1px 1px 1px">
          <div class="grid-content bg-purple">性别</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 2px 2px 1px 1px">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 1px 2px">
          <div class="grid-content bg-purple" style="border: 1px">学校名称</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">{{ row.school }}</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">年级</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 2px 1px 1px">
          <div class="grid-content bg-purple">{{ row.grade_clazz }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 1px 2px">
          <div class="grid-content bg-purple">班级</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">{{ row.clazz }}</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">学生学号</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 2px 1px 1px">
          <div class="grid-content bg-purple">{{ row.number }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 1px 2px">
          <div class="grid-content bg-purple">学生卡号</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">123</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px">
          <div class="grid-content bg-purple">监护人手机</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 2px 1px 1px">
          <div class="grid-content bg-purple">{{ row.device }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 2px 2px">
          <div class="grid-content bg-purple">监护人卡号</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 2px 1px">
          <div class="grid-content bg-purple">{{ row.deviceId }}</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 1px 2px 1px">
          <div class="grid-content bg-purple">接送时间</div>
        </el-col>
        <el-col class="stu_info" :span="6" style="border-width: 1px 2px 2px 1px">
          <div class="grid-content bg-purple">{{ row.date }}</div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryStudent,
  organizationClazz,
  deleteStudent,
  addStudent,
} from "@/api/xiaowu";
export default {
  name: "Student",
  //组件创建
  created() {},
  mounted() {
    this.getList();
    /**监听页面高度 */
    window.onresize = () => {
      this.changeTableMaxHeight()
    }
    this.changeTableMaxHeight()
  },
  destroyed () {
    window.onresize = null
  },
  data() {
    return {
      currentPage1: "1",
      //详细信息弹窗可见性
      dialogVisible: false,
      //新增学生弹窗可见性
      dialognewVisible: false,
      //获取详细信息的行数
      row: "",
      // 遮罩层
      loading: false,
      //查询参数
      queryData: {
        name: "",
        number: "",
        clazzId: "",
        gradeId: "",
        school: "66",
        pageSize: "5",
        pageNum: "1",
      },
      //新增参数
      newStudentForm: {
        name: undefined,
        clazz: undefined,
        number: undefined,
        school: undefined,
        photoUrl: undefined,
      },
      //树状图变量名
      classTreeNode: {
        label: "clazzName",
        children: "chirldren",
      },
      //树状图数据
      organization: [],
      //表格数据
      pageInfo: {},
      //删除请求参数
      selectArr: [],
      //获取页面高度
      tableMaxHeight: 370,
    };
  },
  methods: {
    /** 查询记录列表 */
    getList() {
      this.loading = true;
      queryStudent(this.queryData).then((response) => {
        this.pageInfo = response.data.pageInfo;
        this.loading = false;
      });
      organizationClazz(this.queryData).then((response) => {
        this.organization = response.data.organization;
        this.loading = false;
      });
      console.log(document.body.clientHeight);
      this.pageHeight = document.body.clientHeight * 0.2;
      console.log(this.pageHeight);
    },
    /**获取当前被选中节点的key */
    getCurrentKey(Node) {
      this.queryData.gradeId = "";
      this.queryData.clazzId = "";
      // console.log(Node);
      if (Node.chirldren != undefined) {
        console.log("点击了年级,年级id为" + Node.id);
        this.queryData.gradeId = Node.id;
      } else {
        console.log("点击了班级，班级id为" + Node.id);
        this.queryData.clazzId = Node.id;
      }

      console.log(this.queryData);
      this.getList();
      // console.log(this.$refs.tree.getCurrentKey());
      // console.log(this.$refs.tree.getHalfCheckedKeys());
    },
    /**打开新增弹窗 */
    handleNew() {
      this.dialognewVisible = true;
    },
    /**新增学生操作 */
    handleAdd() {
      console.log(this.newStudentForm);
      addStudent(this.newStudentForm);
    },
    /**重置查询表单 */
    handleRestQuery(){
      this.queryData = {
        name: "",
        number: "",
        clazzId: "",
        gradeId: "",
      }
    },
    /**重置新增表单 */
    handleRest() {},
    /**查看详细信息操作 */
    handleCheck(row) {
      this.dialogVisible = true;
      this.row = row;
    },
    /** 查询按钮操作 */
    handleQuery() {
      // this.queryData.startTime = this.timePicker[0];
      // this.queryData.endTime = this.timePicker[1];
      console.log(this.queryData);
      this.getList();
      this.$message.success("查询成功");
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除学生"' + row.studentName + '"的信息?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          console.log(row.id);
          return deleteStudent(row.id);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    /**返回复选框数据 */
    selectionChange(val){
      this.selectArr = [];
      console.log('val',val);
      val.map((item) => {
        this.selectArr.push(item.id)
      })
      // this.selectArr = val;
      console.log("selectArr",this.selectArr);
    },
    /**批量删除 */
    deleteSelectionChange(){
      console.log("selectArr",this.selectArr);
      this.getList();
    },
    /**获取网页高度 */
    showFilterForm () {
      this.filterActive = !this.filterActive
      this.changeTableMaxHeight()
    },

    changeTableMaxHeight () {
      let height = document.body.offsetHeight // 网页可视区域高度
      if (this.filterActive) {
        this.tableMaxHeight = height - 500
      } else {
        this.tableMaxHeight = height - 400
      }
      console.log(this.tableMaxHeight)
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.stu_info {
  height: 60px;
  //line-height: 60px; //行高居中
  border: solid;
  display: table;
  margin: 0 auto;
}
.grid-content {
  font-size: 17px;
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px 0 10px;
}
.stu_input .el-input__inner {
  border: 0px solid #dcdfe6 !important;
  font-size: 17px;
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px 0 10px;
}
/*去掉横向滚动条*/
.tree_scrollbar .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
::v-deep .tree_scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
